<template>
  <el-form ref="form" :model="formData" label-width="120px">
    <!-- 一级品牌 -->
    <el-form-item label="一级品牌">
      <el-select v-model="formData.brandId" placeholder="请选择一级品牌" @change="fetchSubBrands">
        <el-option
          v-for="brand in brands"
          :key="brand.id"
          :label="brand.name"
          :value="brand.id"
        />
      </el-select>
    </el-form-item>

    <!-- 二级品牌 -->
    <el-form-item label="二级品牌">
      <el-select v-model="formData.subBrandId" placeholder="请选择二级品牌">
        <el-option
          v-for="subBrand in subBrands"
          :key="subBrand.id"
          :label="subBrand.name"
          :value="subBrand.id"
        />
      </el-select>
    </el-form-item>

    <!-- 商品名 -->
    <el-form-item label="商品名">
      <el-input v-model="formData.name" placeholder="请输入商品名" />
    </el-form-item>

    <!-- 描述 -->
    <el-form-item label="描述">
      <el-input v-model="formData.description" type="textarea" placeholder="请输入商品描述" />
    </el-form-item>

    <!-- 图片URL -->
    <el-form-item label="图片URL">
      <el-input v-model="formData.image" placeholder="请输入图片URL" />
    </el-form-item>

    <!-- 提交按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref, reactive } from 'vue';
import { useProductStore } from '../stores/productStore';
import { ElMessage } from 'element-plus';
import axios from 'axios';

export default {
  setup() {
    const productStore = useProductStore();

    // 获取品牌数据
    const brands = productStore.brands;

    // 表单数据
    const formData = reactive({
      brandId: null,
      subBrandId: null,
      name: '',
      description: '',
      image: '', // 图片URL
    });

    // 当前选择的二级品牌列表
    const subBrands = ref([]);

    // 根据一级品牌ID获取对应的二级品牌
    const fetchSubBrands = (brandId) => {
      const selectedBrand = brands.find((brand) => brand.id === brandId);
      subBrands.value = selectedBrand ? selectedBrand.children : [];
      formData.subBrandId = null; // 重置二级品牌选择
    };
    const submit = async () => {
  // 表单校验
  if (!formData.brandId) {
    ElMessage.error('请选择一级品牌！');
    return;
  }
  if (!formData.subBrandId) {
    ElMessage.error('请选择二级品牌！');
    return;
  }
  if (!formData.name) {
    ElMessage.error('请输入商品名！');
    return;
  }
  if (!formData.description) {
    ElMessage.error('请输入商品描述！');
    return;
  }
  if (!formData.image) {
    ElMessage.error('请输入图片URL！');
    return;
  }

  // 构建提交数据
  const payload = {
    ProductName: formData.name,          // 商品名称
    SubCategoryID: formData.subBrandId,  // 二级分类 ID
    ImagePath: formData.image,           // 图片路径
    Description: formData.description,   // 商品描述
  };

  console.log('提交的数据:', payload);

  try {
    const response = await axios.post('http://localhost:5123/api/products', payload, {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    console.log('后端返回:', response.data);
    ElMessage.success('商品添加成功！');
    resetForm();
  } catch (error) {
    console.error('商品添加失败:', error.response?.data || error.message);
    ElMessage.error('商品添加失败，请重试！');
  }
};

    // 重置表单
    const resetForm = () => {
      formData.brandId = null;
      formData.subBrandId = null;
      formData.name = '';
      formData.description = '';
      formData.image = '';
      subBrands.value = [];
    };

    return {
      formData,
      brands,
      subBrands,
      fetchSubBrands,
      submit,
    };
  },
};
</script>
